<template>
<detailsLayout  leftTitle="现场勘查"  style="padding-top:3.5rem;"><!-- class="page-cell" -->
  <div class="fixed-tab" style="z-index:3">
    <mt-navbar v-model="selected" > 
      <mt-tab-item id="1">指纹</mt-tab-item>
      <mt-tab-item id="2">足迹</mt-tab-item>
      <mt-tab-item id="3">DNA</mt-tab-item>
      <mt-tab-item id="4">尸体</mt-tab-item>
      <mt-tab-item id="5">基站</mt-tab-item>
    </mt-navbar>
  </div>
  <!-- tab-container -->
  <mt-tab-container v-model="selected" style="z-index:2">

    <mt-tab-container-item id="1" class="group-wrap zhiwen-group"><!-- 指纹 -->
      <div class="group" v-for="(group,index) in spotData.zhiwen">
        <div class="info-grid">
          <div class="grid-item align-left" v-for="(item, index) in group.rowArr">
            <em>{{item.col_cn}}</em><span>{{item.col_val}}</span>
          </div>
        </div>
      </div>
      <div class="no-record" v-show="!spotData.zhiwen.length">暂无记录</div> 
    </mt-tab-container-item>

    <mt-tab-container-item id="2" class="group-wrap zuji-group"><!-- 足迹 -->
      <div class="group" v-for="(group,index) in spotData.zuji">
        <div class="info-grid">
          <div class="grid-item align-left" v-for="(item, index) in group.rowArr">
            <em>{{item.col_cn}}</em><span>{{item.col_val}}</span>
          </div>
        </div>
      </div>
      <div class="no-record" v-show="!spotData.zuji.length">暂无记录</div>
    </mt-tab-container-item>

    <mt-tab-container-item id="3" class="group-wrap dna-group"> <!--DNA--> 
      <div class="group" v-for="(group,index) in spotData.dna">
        <div class="info-grid">
          <div class="grid-item align-left" v-for="(item, index) in group.rowArr">
            <em>{{item.col_cn}}</em><span>{{item.col_val}}</span>
          </div>
        </div>
      </div>
      <div class="no-record" v-show="!spotData.dna.length">暂无记录</div> 
    </mt-tab-container-item>

    <mt-tab-container-item id="4" class="group-wrap shiti-group"><!-- 尸体 -->
      <div class="group" v-for="(group,index) in spotData.shiti">
        <div class="info-grid">
          <div class="grid-item align-left" v-for="(item, index) in group.rowArr">
            <em>{{item.col_cn}}</em><span>{{item.col_val}}</span>
          </div>
        </div>
      </div>
      <div class="no-record" v-show="!spotData.shiti.length">暂无记录</div> 
    </mt-tab-container-item>

    <mt-tab-container-item id="5" class="group-wrap jizhan-group"><!-- 基站 -->
     <div class="group" v-for="(group,index) in spotData.jizhan">
        <div class="info-grid">
          <div class="grid-item align-left" v-for="(item, index) in group.rowArr">
            <em>{{item.col_cn}}</em><span>{{item.col_val}}</span>
          </div>
        </div>
      </div>
      <div class="no-record" v-show="!spotData.jizhan.length">暂无记录</div>
    </mt-tab-container-item>
  </mt-tab-container>
  
</detailsLayout>
</template>

<script>
import detailsLayout from '../../components/details-layout'
import cardBlock from '../../components/card-block'
import request from '../../helper/request'
const spotApiUrl = 'superRecord/case/xcky_children'
export default {
  name: 'subPageSpot',
  props: {
  },
  data() {
    return {
      xkId: '', // this.$router.
      selected: '0',
      alreadyFetch: [], // 以获取数据的页面

      // -------数据-----
      spotData: {
        zhiwen: [],
        zuji: [],
        dna: [],
        shiti: [],
        jizhan: []
      }
    }
  },
  computed: {
  },
  components: {
    detailsLayout, cardBlock
  },
  filters: {
  },
  methods: {
    getSpotData (url, xkId, sel) {
      sel = `0${sel}`
      url = process.env.NODE_ENV === 'development' ? `${url}?type=${sel}` : url
      return request(url, 'SC041201', {xkbh: xkId, type: sel}).then((res) => {
        return Promise.resolve(res)
      })
    },
    spotDataInit (obj) {
      switch(obj.type) {
        case '01':
          this.spotData.zhiwen = obj.zhiwen
          break;
        case '02':
          this.spotData.zuji = obj.zuji
          break;
        case '03':
          this.spotData.dna = obj.dna
          break;
        case '04':
          this.spotData.shiti = obj.shiti
          break;
        case '05':
          this.spotData.jizhan = obj.jizhan
          break;
      }
    }
  },
  watch: {
    selected(newVal, oldVal) {
      if (this.alreadyFetch.indexOf(newVal) >= 0) {
        console.log('已预览')
      }else{
        this.getSpotData(spotApiUrl, this.xkId, newVal).then((res) => {
          this.spotDataInit(res)
          this.alreadyFetch.push(newVal)
          console.log(this.spotData)
        })
      }
    }
  },
  mounted() {
  },
  created() {
    this.selected = this.$route.query.selected
    this.xkId = this.$route.params.xkbh
    this.alreadyFetch = [] // 清空 以获取的数据
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
// @import "../../style/_vars";
@import "../../style/mixin";
// @import "../../assets/icons/iconfont.css"; 
@import "../../style/public";
.clearfix {
  @include clearfix  
}
/*div,ul,li,h1,h2,h3,h4{
  box-sizing:border-box;
}
p,ul,li{
  margin:0;
  padding:0;
}*/
.page-cell {
  font-size: 1rem;
  //line-height: 1.4;
  margin:0 auto;
  max-width:640px; 
}
.fixed-tab{
  position:fixed;
  top:3.49rem;
  left:0;
  width:100%;
  padding:0 5%;
  background:#FBFBFB;
  .mint-navbar{
    color:#474747;
    background:#FBFBFB;
    .mint-tab-item.is-selected{
      border-bottom: 3px solid #FF901A;
      color: #FF901A;
    }
  }
}
.group-wrap{
  padding: 0 6%;
  .group{
    padding: 1rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
}

</style>
